<style>

</style>
<template>
    <el-tabs v-model="verifyType" type="card">
        <el-tab-pane label="触发式" name="hidePanel">
            <el-form style="width: 412px;padding-top: 10px" label-width="125px">
                <el-form-item label="账号" prop="name">
                    <el-input v-model="form.account" placeholder="请输入账号"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="desc">
                    <el-input v-model="form.password" placeholder="请输入密码"></el-input>
                </el-form-item>
                <el-form-item label="" prop="desc">
                    <div ref="verify-container"></div>

                </el-form-item>
                <el-form-item label="" prop="desc">
                    <el-button style="width: 286px" type="primary">登录</el-button>
                </el-form-item>
            </el-form>
        </el-tab-pane>
        <el-tab-pane label="弹出式" name="pop">
            <el-form style="width: 412px" label-width="125px">
                <el-form-item label="账号" prop="name">
                    <el-input v-model="form.account" placeholder="请输入账号"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="desc">
                    <el-input v-model="form.password" placeholder="请输入密码"></el-input>
                </el-form-item>
                <el-form-item label="">
                    <el-button ref="verify-button" type="primary" @click="showVerify">登录</el-button>
                </el-form-item>
            </el-form>
        </el-tab-pane>
        <el-tab-pane style="width: 412px" label="内嵌式" name="in">
            <el-form label-width="125px">
                <el-form-item label="账号" prop="name">
                    <el-input v-model="form.account" placeholder="请输入账号"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="desc">
                    <el-input v-model="form.password" placeholder="请输入密码"></el-input>
                </el-form-item>
                <el-form-item label="" prop="desc">
                    <div ref="verify-container2"></div>
                </el-form-item>
            </el-form>
        </el-tab-pane>
    </el-tabs>


</template>
<script>
    Rap.define("index", [], function () {
        return {
            data: function () {
                return {
                    verifyType: 'hidePanel',
                    form: {
                        account: '藤之内',
                        password: '123456',
                    }
                }
            },
            mounted: function () {
                var me = this;
                Rap.loadCss('/static/ly/libs/lyverify/index.css');
                Rap.insertScript([
                    "/static/ly/libs/lyverify/index.js"]).then(function () {
                 me.verify1 = LyVerify.slide({
                        container: me.$refs['verify-container'],
                        codeUrl: '/captcha/slideCode',
                        checkUrl: '/captcha/slideCheck',
                        hidePanel: true,
                        checkParams: function () {
                            return {a: 'a', 'b': 'b'};
                        },
                        fail: function (rs) {
                            console.log('slide', 'fail', rs);
                        }, success: function (rs) {

                        }
                    });
                    me.verify2 = LyVerify.slide({
                        codeUrl: '/captcha/slideCode',
                        checkUrl: '/captcha/slideCheck',
                        checkParams: function () {
                            return {a: 'a', 'b': 'b'};
                        },
                        fail: function (rs) {
                            console.log('slide', 'fail', rs);
                        }, success: function (rs) {
                            console.log('slide', 'success', rs);
                        }
                    });
                    me.verify3 = LyVerify.slide({
                        container: me.$refs['verify-container2'],
                        codeUrl: '/captcha/slideCode',
                        checkUrl: '/captcha/slideCheck',
                        checkParams: function () {
                            return {a: 'a', 'b': 'b'};
                        },
                        fail: function (rs) {
                            console.log('slide', 'fail', rs);
                        }, success: function (rs) {
                            console.log('slide', 'success', rs);
                        }
                    });
                })
            },
            methods: {
                showVerify: function () {
                    // this.verify2.reset();
                    this.verify2.show(this.$refs['verify-button'].$el);
                },

            }
        }
    })
</script>